<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性</title>
    <script src="vue.js"></script>
</head>
<body>
    

    <div id="app">
        <p>商品：<input type="text" v-model="name"></p>
        <p>数量：<input type="text" v-model="count"></p>
        <p>价格：<input type="text" v-model="price"></p>
        <button @click="addGoods">添加到购物车</button>
        <li v-for="item in goods">{{item.name}}的数量是{{item.count}},单价是{{item.price}},小计:{{item.price * item.count}}</li>
        <p>{{total}}</p>
    </div>


    <script type="text/javascript">
        var vm =new Vue({
            el: '#app',
            data: {
                goods:[
                    {name:'牙刷',price:10,count:5},
                    {name:'牙膏',price:20,count:2},
                    {name:'镜子',price:30,count:3},
                ],
                name:'',
                count:'',
                price:''
            },
            methods:{
                addGoods(){
                    this.goods.push({name:this.name,price:this.price,count:this.count})
                    this.name=''
                    this.price=''
                    this.count=''
                }
            },
            computed: {
                total() {
                    return '总计: 总数---' + this.goods.reduce((totalCount,g) =>{
                        return totalCount + g.count * 1
                    },0)
                    + '总价---' + this.goods.reduce((totalPrice,g) =>{
                        return totalPrice + g.price * g.count
                    },0)
                }
            }
        })

    </script>
</body>
</html>